<template>
  <div class="head">
    <chart-selector 
      :name="options.income.name" 
      :currentChoice="dataType" 
      @click="updateOptions">
    </chart-selector>
    <chart-selector 
      :color="'green'"
      :name="options.output.name" 
      :currentChoice="dataType" 
      @click="updateOptions">
    </chart-selector>
  </div> 
</template>

<script>
import RadioSelector from '@/components/base/radio-selector/radio-selector'
import ChartSelector from './chart-selector'
export default {
  components: {
    RadioSelector,
    ChartSelector
  },
  props: {
    options: {
      type: Object,
      default: function() {
        return {
          income: {
            name: '收入',
            amount: 12355
          },
          output: {
            name: '支出',
            amount: 11111
          }
        }
          
      }
    },
    dataType: {
      type: String,
      default: ''
    }
  },
  methods: {
    updateOptions(data) {
      // this.currentChoice = data
      this.$emit('click', data)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .head 
    display flex
    height 35px 
    aligin-items center
</style>